{% extends "htmlPages/base.html" %}

        {% block head %}
            <script type="text/javascript" src="../static/js/updateParents.js"></script>
            <script type="text/javascript" src="../static/js/childInfo.js"></script>
            <style type="text/css">
             a:hover {
                cursor:pointer;
             }
            </style>
        {% endblock head %}

        {% block side_navbar %}
           <ul class="nav navbar-nav side-nav">
            <li class="active">
              <a href=""><i class="fa fa-desktop"></i>  דף בית </a>
            </li>
            <li>
              <a href="/messages"><i class="fa fa-bullhorn"></i>  לוח מודעות </a>
            </li>
            <li>
              <a href="/privateMessages"><i class="fa fa-edit"></i>  הודעות אישיות </a>
            </li>
            <li>
              <a href="/contactList"><i class="fa fa-file"></i>  דף קשר </a>
            </li> 
          </ul>
        {% endblock side_navbar %}

        {% block page_wrapper %}

            <div class="row">
              <div class="col-lg-12">
                <h1>נוכחות
                    <small>{{ date }}</small>
                  </h1>
              </div>
            </div>

            <div class="row" id="forAnnouncement"></div>
            <div class="row" id="forMissings"></div>

            <div class="row" dir="ltr">
                <div class="col-lg-12 pull-left">
                   <p>
                    <a class="btn btn-success" href="/editAtt" style="margin-right:1.5em">
עבור לעריכת נוכחות
                    </a>
                    <a class="btn btn-success" href = "#approveModal" data-toggle="modal">
שליחת התראה להורים
                    </a>
                  </p>
                </div>
            </div>

        {%- set counter = 0 -%}
        {%- set flag = [] -%}
{%- for child in children %}
  {%- if counter%6 == 0 %}
       {%- do flag.append(1) -%}
        <div class="row">
  {% endif -%}
          <div class="col-md-2 pull-right">
          {%- if arrived[child.child_id] == 1 %}
            <div class="panel panel-success">
          {% else %}
            <div class="panel panel-danger">
          {% endif -%}
              <div class="panel-heading">
                <div class="row">
                  <div class="col-xs-6 pull-left">
                    <!--<img src="static/avatars/{{ child.child_id }}.png" alt="{{ child.child_id }}" class="img-rounded pull-left"></div>-->
                  <img src="static/img/default.jpg" alt="{{ child.child_id }}" class="img-rounded pull-left">                  </div>
                  <div class="col-xs-6 text-right">
                    <p class="announcement-heading unselectable" style="cursor:default">{{ child.first_name }} <br> {{ child.last_name }}</p>
                  </div>
                </div>
              </div>
              <a onclick="getChildInfo('{{ child.child_id }}')">   <!-- LINK TO CHILD'S PROFILE -->
                <div class="panel-footer announcement-bottom">
                  <div class="row">
                    <div class="col-xs-6 text-left">
                      <i class="fa fa-arrow-circle-left"></i>
                    </div>
                    <div class="col-xs-6 unselectable">
לפרטים
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
  {%- if counter%6 == 5 %}
     {%- do flag.append(0) -%}
       </div>
  {% endif -%}
  {%- set counter = counter + 1 -%}
{% endfor -%}
        {%- if flag %}
          </div>
        {% endif -%}

        <div class = "modal fade" id = "childModal" role = "dialog"></div>

        <div class ="modal fade" id ="approveModal" role ="dialog">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <div class="row">
                            <div class="col-lg-10 pull-right">
                                <h1>
אישור שליחת התראה להורים
                                </h1>
                            </div>
                            <div class="col-lg-2 text-left">
                                <a class = "btn btn-danger" data-dismiss = "modal">&times;</a>
                            </div>
                        </div>
                    </div>
                    <div class = "modal-body">
                        <p>
בלחיצה על הכפתור ישלחו התראות למכשירים הסלולריים של הורי הילדים,
                            <br>
האם הינך בטוחה כי ברצונך לשלוח התראות כעת?
                        </p>
                    </div>
                    <div class = "modal-footer" style="text-align:center">
                        <a id="sendUpadate" class = "btn btn-success">
שלחי התראות להורים
                        </a>
                        <a class = "btn btn-default" data-dismiss = "modal">
ביטול
                        </a>
                    </div>
                </div>
            </div>
        </div>

<br>

        {% endblock page_wrapper %}




